<template>
    <view class="y">

        <view class="q1 y">
            <view style="display: flex;margin-left: auto;" @click="shezhi()">
                设置
            </view>
            <view class="">
                <image src="../../static/我的1.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
            </view>
            <view class="">
                <p>暴龙战士</p>
            </view>
        </view>

        <view class="q2 y">
            <view class="x q2a">
                <view class="">我的订单</view>
                <view class="">全部订单></view>
            </view>
            <view class="x q2b">
                <view class="zxfx" style="height: 110rpx;" v-for="(item,index) in list" :key="index">
                    <view class="spjz">
                        <image :src="item.tupian" mode="" style="width: 50rpx;height: 50rpx;"></image>
                    </view>
                    <view>{{item.name}}</view>
                </view>
            </view>
        </view>

        <view class="y beijing" style="align-items: center;margin-top: 20rpx;">
            <view class="x hxfx1 czjz" style="width: 95%;height: 110rpx;">
                <view class="">我的优惠券</view>
                <view class="wi">全部优惠券></view>
            </view>
            <view class="x w czjz" style="height: 130rpx;">
                <view class="w spjz y" v-for="(item,index) in list1" :key="index">
                    <view class="spjz">
                        <image :src="item.tupian" mode="" style="width: 50rpx;height: 50rpx;"></image>
                    </view>
                    <view style="margin: auto; margin-top: 20rpx;">{{item.name}}</view>
                </view>
            </view>
        </view>

        <view class="beijing" style="margin-top: 20rpx;">
            <view class="zxfx" style="height: 100%;margin-left: 50rpx;">
                <view class="listt2" v-for="item in list2" @click="lisst2(item.path)">
                    <view>{{item.name}}</view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        name: "待付款",
                        tupian: '/static/logo.png'
                    },
                    {
                        name: "待发货",
                        tupian: '/static/logo.png'
                    },
                    {
                        name: "待收货",
                        tupian: '/static/logo.png'
                    },
                    {
                        name: "已完成",
                        tupian: '/static/logo.png'
                    },
                ],
                list1: [{
                        name: "待使用",
                        tupian: '/static/logo.png'
                    },
                    {
                        name: "已使用",
                        tupian: '/static/logo.png'
                    },
                    {
                        name: "过期关闭",
                        tupian: '/static/logo.png'
                    }
                ],
                list2: [{
                        id: 0,
                        name: "我的收藏",
                        path: '/pages/wodeshocang/wodeshocang'

                    },
                    {
                        id: 1,
                        name: "收货地址",
                        path: '/pages/shohuodizhi/shohuodizhi'
                    },
                    {
                        id: 2,
                        name: "客服中心",
                        path: '/pages/kefuzhoxin/kefuzhoxin'
                    }
                ]
            }
        },
        onLoad() {

        },

        methods: {
            shezhi() {
                uni.navigateTo({
                    url: '/pages/shezhi/shezhi'
                })
            },
            lisst2(url) {
                uni.navigateTo({
                    url
                })
            }
        }

    }
</script>

<style>
    .beijing {
        width: 100%;
        height: 300rpx;
        background: #ffffff;
    }

    html {
        background: #f1f1f1;
    }

    .q1 {
        width: 100%;
        height: 260rpx;
        background: #ff393c;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .q1 view {
        width: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .q2 {
        width: 100%;
        height: 300rpx;
        background: #ffffff;
        margin-top: 30rpx;
        display: flex;
        align-items: center;

    }

    .q2a {
        width: 95%;
        height: 100rpx;
        justify-content: space-between;
        align-items: center;
    }

    .q2b {
        width: 100%;
        height: 200rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .q3 {
        width: 100%;
        height: 300rpx;
        background: #ffffff;
        margin-top: 30rpx;
        display: flex;
        align-items: center;
    }

    .q4 {
        width: 100%;
        height: 300rpx;
        background: #ffffff;
        margin-top: 30rpx;
        display: flex;
        align-items: center;
    }

    .listt2 {
        border-bottom: 1rpx solid #e8e8e8;
        width: 90%;
        padding-bottom: 20rpx;
    }
</style>